<template>
  <view class="note-wrapper" v-if="!$u.test.empty(note)">
    <view class="heart-photo">
      <u-image width="64rpx" height="64rpx" :src="note.user.avatar_url" shape="circle"
        ><u-icon slot="error" size="28" name="account-fill"></u-icon
      ></u-image>
    </view>
    <view class="right">
      <view class="name">{{ note.user.nick_name }}</view>
      <view class="content">{{ note.content }}</view>
      <view class="date">{{ note.create_time | timeFrom('yyyy-mm-dd') }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    note: {
      type: Object,
      default() {
        return {}
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.note-wrapper {
  display: flex;
  padding: 30rpx;

  .right {
    flex: 1;
    margin-left: 20rpx;
    margin-right: -30rpx;
    padding-right: 30rpx;
    padding-bottom: 30rpx;
    .name {
      margin-right: 20rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: $edu-content-color;
    }
    .content {
      margin-top: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: $edu-main-color;
      line-height: 46rpx;
      word-break: break-all;
    }
    .date {
      margin-top: 20rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
  }
}
</style>
